


<template>
   <div class="about">
    <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
  <el-form-item label="店铺名称">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
   
    <el-form-item label="店铺密码">
      <el-input v-model="ruleForm.password" type="password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef,ruleForm)">登录</el-button>
      <!-- <el-button>Cancel</el-button> -->
    </el-form-item>
  </el-form>
   </div>
 
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {useRouter} from 'vue-router'
import {getLogin} from '@/api/service'
import { ElMessage } from 'element-plus'
const router = useRouter();
interface RuleForm {
  name: string
  password: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  password: '',
 
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '账号与密码不匹配',
      trigger: 'blur',
      validator: function(rule, value, callback) {
      if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g.test(value)) {
        callback()
      } else {
        callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合'))
      }
    }

    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined,ruleForm:any) => {
  if(!ruleForm.name) {
    return ElMessage({
          message: '请输入账号',
          type: 'warning',
        })
  }
  if(!ruleForm.password) {
    return ElMessage({
          message: '请输入密码',
          type: 'warning',
        })
  }
  if (!formEl) return
   formEl.validate((valid, fields) => {
    if (valid) {
      let data = {
        type:'login',
        user:ruleForm.name,
        pass:ruleForm.password
      }
      getLogin(data).then((res:any)=>{
        console.log(res)
        if(res.code==1) {
          localStorage.setItem('token',res.data.token)
          localStorage.setItem('user',res.data.user)

          return router.push('/home');
        }
        ElMessage({
          message: res.msg,
          type: 'warning',
        })
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>
<style scoped>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>